<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
@if (applicationTypes && applicationFormGroup) {
  <div class="form" [formGroup]="applicationFormGroup">
    <mat-form-field>
      <input
        id="name"
        type="text"
        matInput
        formControlName="name"
        maxlength="512"
        required
        data-testid="application_creation_v4_name_input"
      />
      <mat-label>Name</mat-label>
      <mat-error *ngIf="applicationFormGroup.controls.name.errors?.required">Application name is required</mat-error>
    </mat-form-field>

    <mat-form-field>
      <textarea
        id="description"
        matInput
        #input
        maxlength="40000"
        formControlName="description"
        rows="4"
        data-testid="application_creation_v4_description_input"
      ></textarea>
      <mat-label>Description</mat-label>
      <mat-hint>Provide a description of your application, what it does, ...</mat-hint>
    </mat-form-field>

    <mat-form-field>
      <input id="domain" type="text" matInput formControlName="domain" maxlength="512" data-testid="application_creation_v4_domain_input" />
      <mat-label>Domain</mat-label>
    </mat-form-field>

    <h3 class="form__securityTitle">Security</h3>
    @if (applicationTypes.length === 0) {
      <gio-banner-warning>No application type available, please check Client Registration configuration.</gio-banner-warning>
    }

    @if (applicationTypes.length > 1) {
      <gio-form-selection-inline formControlName="type">
        @for (type of applicationTypes; track type.id) {
          <gio-form-selection-inline-card [value]="type.id">
            <gio-form-selection-inline-card-content [icon]="type.icon">
              <gio-card-content-title>{{ type.title }}</gio-card-content-title>
              <gio-card-content-subtitle>{{ type.subtitle }}</gio-card-content-subtitle>
            </gio-form-selection-inline-card-content>
          </gio-form-selection-inline-card>
        }
      </gio-form-selection-inline>
    }

    @if (applicationType$ | async; as applicationType) {
      @if (applicationType.isOauth) {
        <mat-form-field>
          <mat-label>Allowed grant types</mat-label>
          <mat-select formControlName="oauthGrantTypes" multiple>
            @for (grantType of applicationType.allowedGrantTypesVM; track grantType.value) {
              <mat-option [value]="grantType.value" [disabled]="grantType.disabled"
                >{{ grantType.label }}
                @if (grantType.disabled) {
                  - <i>(Mandatory)</i>
                }
              </mat-option>
            }
          </mat-select>
          <mat-hint>Grant types allowed for the client. Please set only grant types you need for security reasons</mat-hint>
        </mat-form-field>

        <mat-form-field *ngIf="applicationType.requiresRedirectUris">
          <mat-label>Redirect URIs *</mat-label>
          <gio-form-tags-input formControlName="oauthRedirectUris" placeholder="Enter a redirect URI"> </gio-form-tags-input>
          <mat-hint align="start">URIs where the authorization server will send OAuth responses</mat-hint>
        </mat-form-field>
      } @else {
        <mat-form-field>
          <input id="appType" type="text" matInput formControlName="appType" maxlength="64" />
          <mat-label>Type</mat-label>
          <mat-hint>Type of the application (mobile, web, ...)</mat-hint>
        </mat-form-field>

        <mat-form-field>
          <input id="appClientId" type="text" matInput formControlName="appClientId" maxlength="300" />
          <mat-label>Client ID</mat-label>
          <mat-hint
            >The <code>client_id</code> of the application. This field is required to subscribe to certain type of API Plan (OAuth2,
            JWT)</mat-hint
          >
        </mat-form-field>
      }
    }
  </div>
}
